<template>
    <div class="content">
    <!-- 筛选条件 -->
        <el-row class="filter_block">
            <div class="block_left block">
                <el-form ref="form" :model="form" label-width="120px" size="small">
                    <el-form-item label="票面金额">
                        <el-col :span="6" class="bill_price">
                            <el-input type="text" 
                                v-model="form.billSumPrice"
                                placeholder="请输入票面金额"
                                @input="changePrice"
                                ></el-input>
                            <span class="company">万元</span>
                        </el-col>
                        <!-- <el-button type="info" size="small" v-if="form.billSumPrice != ''" @click="clearPrice()">清空</el-button> -->
                    </el-form-item>
                    <el-form-item label="到期日期">
                        <el-col :span="6">
                            <el-date-picker
                                v-model="form.deadlineDays"
                                type="date"
                                placeholder="选择日期"
                                class="full-width"
                                :picker-options="pickerOptions"
                                value-format="yyyy-MM-dd"
                                @change="changeDate()">
                            </el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="承兑机构">
                        <el-col :span="24">
                            <el-checkbox-group v-model="acceptorTypeArr" @change="changeCheckbox(acceptorTypeArr)" size="medium">
                                <el-checkbox-button v-for="item in acceptOptions" :label="item.key" :key="item.key">{{item.label}}</el-checkbox-button>
                            </el-checkbox-group>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="背书瑕疵">
                        <el-col :span="10">
                            <el-radio-group v-model="form.billFlaw" size="medium" @change="changeFlaw()">
                                <el-radio-button v-for="item in flawOptions" :label="item.key" :key="item.key">{{item.label}}</el-radio-button>
                            </el-radio-group>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="报价方式">
                        <el-col :span="10">
                            <el-radio-group v-model="form.loanAndEntrance" size="medium" @change="changeTradeType()">
                                <el-radio-button v-for="item in tradeModeOptions" :label="item.key" :key="item.key">{{item.label}}</el-radio-button>
                            </el-radio-group>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="筛选条件" class="condition_tangs">
                        <el-tag
                            v-for="tag in tags"
                            :key="tag.name"
                            closable
                            disable-transitions
                            :type="tag.type"
                            size="small"
                            @close="closeTag(tag)">
                            {{tag.name}}
                        </el-tag>
                        <span v-if="tags.length == 0" class="hpx-label">无</span>
                        <span class="clear_filter" v-if="tags && tags.length != 0" @click="clearFilter()"><i class="iconfont icon-shanchu"></i> 清空筛选</span>
                        <el-button type="primary" size="mini" class="searchBtn" @click="searchPrice()">筛选</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="block_right block">
                <el-row class="block_title">
                    <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/search-icon.png" alt="">
                    <span>请在左边输入票据信息，若无合适资方， 平台帮您找，一对一免费服务，VIP待遇！</span>
                </el-row>
                <el-row class="block_content">
                    <el-row class="title">联系电话</el-row>
                    <el-row class="contact">
                        <el-input placeholder="输入您的手机号，等待服务" type="text" size="small" v-model="telphoneNumber"></el-input>
                        <el-button type="primary" size="small" @click="reserva()">预约出票</el-button>
                    </el-row>
                    <el-row class="title">直接联系客服 (微信同号)</el-row>
                    <el-row class="phoneNumber">
                        <el-col :span="12"><span>小徐:</span> 18621154530</el-col>
                        <el-col :span="12"><span>小彭:</span> 18621154532</el-col>
                    </el-row>
                    <el-row class="phoneNumber">
                        <el-col :span="12"><span>小胡:</span> 17321177931</el-col>
                        <el-col :span="12"><span>小张:</span> 18616821047</el-col>
                    </el-row>
                </el-row>
            </div>
        </el-row>
        <el-row class="table_title">
            <div class="title_word">
                报价信息
            </div>
        </el-row>
<!-- 票查查列表 -->
        <el-table
            :data="tableData.body"
            :row-key="get_row_key"
            :expand-row-keys="expandRowKeys"
            @current-change="toggleRowExpansion"
            @row-click="clickTable"
            ref="refTable"
            :default-sort="defaultSort"
            @sort-change="sortChange"
            style="width: 100%"
            class="pccData">
            <el-table-column type="expand">
                <template>
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-row>
                            <el-col :span="4">
                                <el-form-item label="票据类型:">
                                    <span>{{ detailData.billTypeId == 101 ? '电票' : '纸票' }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label="交易方式:">
                                    <span>{{ detailData.tradeTypeId == 1801 ? '买断' : '带贴' }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="期限:">
                                    <span>{{ formatterTime(detailData.startTime) }}--{{ formatterTime(detailData.endTime) }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label="瑕疵可收:">
                                    <span>{{ detailData.billFlawId == 1 ? '可' : '不可' }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label="联系人姓名:">
                                    <span>{{ detailData.contactName }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row v-if="detailData.outUsage == 1">
                            <el-col :span="4">
                                <el-form-item label="求购数量:">
                                    <span>{{ detailData.wantNumbe }}</span>
                                </el-form-item>
                            </el-col>
                            
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="原始报价:">
                                    <span>
                                        {{ detailData.description }}
                                        <span class="remark">(联系我们时请先告知在汇票线平台上看到的信息)</span>
                                    </span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                prop="offerTime"
                label="发布时间"
                sortable="custom"
                :sort-orders="['ascending', 'descending']">
            </el-table-column>
            <el-table-column
                prop="simpleName"
                label="报价机构"
                width="160px"
                class-name="accept">
                <template slot-scope="scope">
                    <span class="bill_source">
                        <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/NO_1.png" alt="" v-if="scope.row.customerStatus == 2">
                        <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/NO_2.png" alt="" v-if="scope.row.customerStatus == 1">
                        <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/NO_3.png" alt="" v-if="scope.row.customerStatus == 0">
                    </span>
                    <span>{{ formatterAcceptor(scope.row.simpleName,6) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="billSumPrice"
                label="票面金额">
            </el-table-column>
            <el-table-column
                v-if="isShowDiscountAmount"
                prop="discountAmount"
                label="每十万扣"
                sortable="custom"
                :sort-orders="['ascending', 'descending']">
                <template slot-scope="scope">
                    <div>
                        {{scope.row.discountAmount ? scope.row.discountAmount : '--'}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="billRate"
                label="加价利率">
                <template slot-scope="scope">
                    <div>
                        {{ scope.row.outUsage == 0 ? (scope.row.billRate + '%' + (scope.row.billEveryPlus != 0 ? '+' + scope.row.billEveryPlus + '元' : '')) : scope.row.billEveryPlus + '元' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="acceptorTypeName"
                label="承兑机构"
                :formatter="formatterAccept">
            </el-table-column>
            <el-table-column
                prop="contactPhone"
                label="联系人手机号">
            </el-table-column>
            <el-table-column
                label="操作"
                >
                <template slot-scope="scope">
                    <el-button type="primary" plain size="small">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row class="pagination">
            <el-pagination
                @current-change="change"
                @size-change="changes"
                :current-page="tableData.footer.currentPage"
                :page-sizes="[10, 15, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.footer.total">
            </el-pagination>
        </el-row>
        <!-- 预约出票 -->
        <DialogInput ref="remin" title="预约出票">
            <div class="rem-dialog-con reserva-dialog">
                <el-row>
                    <i class="iconfont icon-chenggong hpx-success"></i>
                </el-row>
                <el-row>
                    预约出票成功，稍后汇票线客服将会联系您，请耐心等待……
                </el-row>
            </div>
            <span slot="Remfooter">
                <el-button type="primary" size="small" class="dialog-button" @click="iKnow()">我知道了</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import {Vue, Component, Prop} from 'vue-property-decorator'
    import PccTable from '@component/common/PccTable.vue'
    import moment from 'moment'
    import DialogInput from '@component/common/DialogInput.vue'
    import _ from 'lodash'
    import { ellipsis } from '@/util/format';
import { setTimeout } from 'timers';
    @Component({
        components:{
            PccTable,
            DialogInput
        },
        // watch: {
        //     form: function (oldForm,newForm) {
        //         this.tableData.footer.currentPage = 1
        //     },
        //     $nextTick: function () {
        //         this.getData()
        //     }
        // }
    })
    export default class Pcc extends Vue {
        @Prop() index!:any
    //data
        //预约出票
        telphoneNumber = ''
        form = {
            acceptorType: '',
            billFlaw: '',
            billSumPrice: '',
            deadlineDays: '',
            loanAndEntrance: '', //'load'货款，'entrance'，行口
            //outUsageIsEntrance:0, //0：非行口 1：行口
            //outUsageIsLoan: 0,   //0：非货款 1：货款
            orderBy: "-offerTime"
        }
        acceptorTypeArr = ['']
        acceptOptions = [{
                label: '不限',
                key: ''
            },{
                label: '国股',
                key: '401'
            },{
                label: '城商',
                key: '402'
            },{
                label: '三农',
                key: '404'
            },{
                label: '村镇',
                key: '405'
            },{
                label: '外资',
                key: '406'
            },{
                label: '财务公司',
                key: '407'
            },{
                label: '商票',
                key: '408'
        }]
        flawOptions = [{
                label: '不限',
                key: ''
            },{
                label: '无瑕疵',
                key: '0'
            },{
                label: '有瑕疵',
                key: '1'
        }]
        tradeModeOptions = [{
                label: '不限',
                key: ''
            },{
                label: '行口',
                key: 'entrance'
            },{
                label: '货款',
                key: 'loan'
        }]
        //outUsage:number|string = ''
        tableData:TableData = {
            header: [{
                    label: '报价时间',
                    key: 'offerTime'
                },
                {
                    label: '报价机构',
                    key: 'simpleName'
                },
                {
                    label: '每十万扣',
                    key: 'discountAmount',
                    formatter: (row:any) => row.discountAmount > 0 ? row.discountAmount : '--'
                },
                {
                    label: '票面金额',
                    key: 'billSumPrice'
                },
                {
                    label: '加价利率',
                    key: 'billRate',
                    formatter: (row:any) => row.outUsage != 1 ? row.billRate + '%+' + row.billEveryPlus : '--'
                },
                {
                    label: '承兑机构',
                    key: 'acceptorTypeName'
                },
                {
                    label: '联系人手机号',
                    key: 'contactPhone'
            }],
            body: [],
            footer: {
                total: 0,
                pageSize: 10,
                currentPage: 1
            }
        }
        detailData = {
            billTypeId:'',
            tradeTypeId: '',  //交易方式  1801：买断  !1805 带贴
            startTime: '',
            endTime: '',
            billFlawId: '',  //瑕疵可收  1: 可  !1: 不可
            customerStatus: '',//用户状态   0：非注册用户  1：注册卖方  2：注册买卖方
            outUsage: '',//报价方式  0:行口  !0:货款
            contactName: '',
            description: '', //原始报价
            wantNumbe: ''
        }
        //筛选条件标签
        tags:any = []
        oldChecked = []
        filterCondition = {
            //票面金额
            billPrice: '',
            //到期日
            expireDate: '',
            //承兑机构
            acceptType: '',
            //背书瑕疵
            flaw: '',
            //报价方式
            LoanAndEntrance: ''
        }
        get filterType () {
            return {
                billPrice: `票面金额: ${this.filterCondition.billPrice}万`,
                expireDate: `到期日期: ${this.filterCondition.expireDate}`,
                acceptType: `承兑机构: ${this.filterCondition.acceptType}`,
                flaw: `背书瑕疵: ${this.filterCondition.flaw}`,
                LoanAndEntrance: `报价方式: ${this.filterCondition.LoanAndEntrance}`
            }
        }
        //展开行的集合
        expandRowKeys:any = []
        //是否显示每十万扣款
        isShowDiscountAmount:boolean = false
        normalSort = true
        //默认排序规则
        defaultSort = {prop: 'offerTime', order: 'descending'}
    //methods
        //预约出票
        async reserva () {
            if(!this.telphoneNumber){
                this.$alert('请输入手机号','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            let myreg=/^[1][3,4,5,6,7,8][0-9]{9}$/;
            if (!myreg.test(this.telphoneNumber)) {
                this.$alert('请输入正确的手机号','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            let params = {
                contactInformation: this.telphoneNumber
            }
            let res = await this.$http.post('reservatebill/add',params)
            if(res.status == 200){
                this.$refs['remin'].openDialog()
            }
        }
        iKnow () {
            this.$refs['remin'].closeDialog()
            this.telphoneNumber = ''
        }
        //获取票查查列表数据
        async getData () {
            if(!this.normalSort){
                this.form.orderBy = '-discountAmount'
            }
            let form = {
                ...this.form,
                n: this.tableData.footer.pageSize,
                p: this.tableData.footer.currentPage
            }
            let res:any = await this.$http.post('pcc/pc/getPccBillOfferListPC',form)
            if(res.status == 200){
                this.tableData.body = res.data.listName
                this.tableData.footer.total = res.data.page_info.items_number || res.data.page_info.current_page
                this.tableData.footer.pageSize = res.data.page_info.items_per_page
                this.tableData.body.map((item:any, index) => {
                    item.index = index
                })
                if(this.index){
                    let openItem = this.tableData.body.filter(item => item.index == this.index)
                    this.clickTable(openItem[0])
                }
                
            }
        }


        /**
         * 筛选条件strts
         * 
         */

        //限制日期选择的最小值
        pickerOptions = {
            disabledDate(time) {
                // return time.getTime() < Date.now()
            }
        }
        //关闭标签
        closeTag (tag) {
            this.tags.splice(this.tags.indexOf(tag),1)
            let variable = tag.variable
            switch (variable) {
                case 'billPrice':
                    this.form.billSumPrice = ''
                    break;
                case 'expireDate':
                    this.form.deadlineDays = ''
                    break;
                case 'acceptorType':
                    let deleteTag = _.find(this.acceptOptions, (el) => tag.name.indexOf(el.label)>-1)
                    if(deleteTag){
                        this.acceptorTypeArr.forEach((item, index) => {
                            if(item === deleteTag.key){
                                this.acceptorTypeArr.splice(index, 1)
                                if(this.acceptorTypeArr.length == 0){
                                    this.acceptorTypeArr = ['']
                                    this.form.acceptorType = ''
                                }
                            }
                        })
                    }
                    break;
                case 'flaw':
                    this.form.billFlaw = ''
                    break;
                case 'LoanAndEntrance':
                    this.form.loanAndEntrance = ''
                    break;
            }
            this.getData()
        }
        //清空筛选
        clearFilter () {
            this.tags = []
            this.form.billSumPrice = ''
            this.form.deadlineDays = ''
            this.acceptorTypeArr = ['']
            this.oldChecked = []
            this.form.acceptorType = ''
            this.form.billFlaw = ''
            this.form.loanAndEntrance = ''
            // this.getData()
            this.$refs.refTable.clearSort();
            this.$nextTick(()=>{
                this.$refs.refTable.sort('offerTime','descending')
            })
            this.isShowDiscountAmount = false
        }
        //生成筛选条件标签
        getConditionTag (label:string, variable:string) {
            let tag = {
                name: label,
                variable: variable, 
                type: 'danger'
            }
            this.tags.push(tag)
        }
        //点击不限时删除对应的标签
        deleteTags (variable:string) {
            let anotherTags = this.tags.filter((el, index) => {
                return el.variable !== variable
            })
            this.tags = anotherTags;
        }
        //比较两个数组的差异
        diff(arr1, arr2) {
            let newArr = [];
            let arr3 = [];
            for (let i=0;i<arr1.length;i++) {
                if(arr2.indexOf(arr1[i]) === -1)   
                arr3.push(arr1[i]);
            }
            let arr4 = [];
            for (let j=0;j<arr2.length;j++) {
                if(arr1.indexOf(arr2[j]) === -1)
                arr4.push(arr2[j]);
            }
            newArr = arr3.concat(arr4);
            return newArr;
        }
        //由选项的key得出对应的label
        getCheckLabel (arr:any, value:string) {
            for(let i = 0;i<arr.length;i++){
                if(arr[i].key === value){
                    return arr[i].label
                }
            }
        }
        //筛选
        searchPrice () {
            this.tableData.footer.currentPage = 1
            if(this.form.billSumPrice && this.form.deadlineDays){
                this.normalSort = false
            }
            if(this.form.billSumPrice){
                this.filterCondition.billPrice = this.form.billSumPrice
                let currentTag = _.find(this.tags, el => el.variable === 'billPrice')
                if(currentTag) {
                    currentTag.name = this.filterType.billPrice
                } else {
                    this.getConditionTag(this.filterType.billPrice, 'billPrice')
                }
            }
            if(this.normalSort){
                this.getData()
            }else{
                if(!this.form.billSumPrice || !this.form.deadlineDays){
                    this.isShowDiscountAmount = false
                }else{
                    this.isShowDiscountAmount = true
                }
                this.$refs.refTable.clearSort();
                this.$nextTick(()=>{
                    this.$refs.refTable.sort('discountAmount','ascending')
                })
            }
        }
        //清空金额
        // clearPrice () {
        //     this.form.billSumPrice = ''
        //     this.deleteTags('billPrice')
        //     this.getData()
        // }
        changePrice () {
            if(this.form.billSumPrice == ''){
                this.deleteTags('billPrice')
                this.getData()
            }
        }
        //更改日期
        changeDate () {
            if(this.form.deadlineDays){
                this.filterCondition.expireDate = moment(this.form.deadlineDays).format('YYYY-MM-DD')
                let currentTag = _.find(this.tags, el => el.variable === 'expireDate')
                if(currentTag) {
                    currentTag.name = this.filterType.expireDate
                } else {
                    this.getConditionTag(this.filterType.expireDate, 'expireDate')
                }
            }else{
                this.deleteTags('expireDate')
            }
            // this.getData()
        }
        //更改承兑机构
        changeCheckbox (item) {
            //如果点击不限，则取消其他选项
            if(item[item.length-1] == ''){
                this.acceptorTypeArr = ['']
                this.deleteTags('acceptorType')
            }else{
                //点击取消了某个选项
                if(item.length < this.oldChecked.length){
                    //删除的承兑类型id
                    let deleteId = this.diff(Array.from(item), Array.from(this.oldChecked))
                    //删除的承兑类型name
                    let deleteStr = this.getCheckLabel(this.acceptOptions,deleteId.join().toString())
                    //删除的标签
                    let deleteTag = _.find(this.tags, el => el.name.indexOf(deleteStr)>-1)
                    if(deleteTag){
                        this.tags.splice(this.tags.indexOf(deleteTag),1)
                    }
                    this.oldChecked = item
                }else{
                    //新增选中了某个选项
                    this.oldChecked = item
                    //选中的类型
                    this.filterCondition.acceptType = this.getCheckLabel(this.acceptOptions,item[item.length-1])
                    this.getConditionTag(this.filterType.acceptType, 'acceptorType')
                }
                //点击其它选项，则取消“不限”的选中状态
                if(item.includes('')){
                    item.splice(item.indexOf(''),1)
                    this.acceptorTypeArr = item
                }
                //取消了全部选项
                if(item.length == 0){
                    this.acceptorTypeArr = ['']
                    this.deleteTags('acceptorType')
                }
            }
            this.form.acceptorType = this.acceptorTypeArr.join(',')
            // this.getData()
        }
        //更改背书瑕疵
        changeFlaw () {
            //筛选出当前选中选项的值
            let {label} = _.find(this.flawOptions, (e, i) => {
                return e.key == this.form.billFlaw;
            })
            this.filterCondition.flaw = label
            //如果已经存在同类型选项的标签
            let currentTag = _.find(this.tags, el => el.variable === 'flaw')
            if(currentTag) {
                currentTag.name = this.filterType.flaw
            } else {
                this.getConditionTag(this.filterType.flaw, 'flaw')
            }
            //点击不限删除对应标签
            if(this.form.billFlaw == ''){
                this.deleteTags('flaw')
            }
            // this.getData()
        }
        //切换报价方式
        changeTradeType () {
            let {label} = _.find(this.tradeModeOptions, (e, i) => {
                return e.key == this.form.loanAndEntrance;
            })
            this.filterCondition.LoanAndEntrance = label;
            let currentTag = _.find(this.tags, el => el.variable === 'LoanAndEntrance')
            if(currentTag) {
                currentTag.name = this.filterType.LoanAndEntrance
            }else{
                this.getConditionTag(this.filterType.LoanAndEntrance, 'LoanAndEntrance')
            }
            if(this.form.loanAndEntrance == ''){
                this.deleteTags('LoanAndEntrance')
            }
            // this.getData()
        }

        /**
         * 筛选条件end
         * 
         */
        get_row_key (row:object) {
            return row.index
        }
        //切换展示
        toggleRowExpansion (row:object,expanded:boolean) {
            this.expandRowKeys = []
            // this.expandRowKeys.push(row.index)
        }
        //获取单条票查查数据详情
        async clickTable (row:any) {
            let params = {
                billOfferDetailId: row.billOfferDetailId,
                outUsage: row.outUsage
            }
            let res = await this.$http.get('pcc/pc/getPccBillOfferDetailPC',{params})
            if(res.status == 200){
                this.detailData = res.data
                this.$refs['refTable'].toggleRowExpansion(row)
            }
        }
        formatterAcceptor (prop:string,number:number = 10) {
            return ellipsis(prop, '...', number)
        }

        formatterAccept (row) {
            return ellipsis(row.acceptorTypeName,'...',10)
        }
        formatterTime (temp) {
            return moment(temp).format('YYYY-MM-DD')
        }
        //子组件分页回调
        change (page:number) {
            this.tableData.footer.currentPage = page
            this.getData()  
        }
        changes (size:number) {
            this.tableData.footer.pageSize = size
            this.getData()  
        }
        //排序
        sortChange (col) {
            this.normalSort = true
            if(col.order == 'ascending'){
                this.form.orderBy = '+'+col.prop 
            }else if(col.order == 'descending'){
                this.form.orderBy = '-'+col.prop 
            }
            this.getData()
        }
        
        created () {
            this.getData()
        }
        // mounted() {
        //     this.getData()
        // }
    }

</script>

<style lang="scss" scoped>
    .content{
        width: 84%;
        margin: 20px auto;
        .filter_block{
            margin-bottom: 52px;
            .block{
                box-shadow: 2px 2px 10px 2px $__color-line;
                border-radius: 4px;
            }
            .block_left{
                padding: 20px 0;
                width: 73%;
                margin-right: 1%;
                float: left;
                .bill_price{
                    position: relative;
                    .company{
                        position: absolute;
                        right: 5px;
                        top: 0;
                    }
                }
                // .searchBtn{
                //     text-align: right;
                //     padding-right: 20px;
                //     margin-bottom: 18px;
                //     .el-button{
                //         width: 100px;
                //     }
                // }
                .condition_tangs{
                    border-top: 1px solid $__color-bg-primary;
                    margin-bottom: 0;
                    padding-top: 10px;
                    padding-right: 120px;
                    position: relative;
                    .el-tag{
                        margin-right: 10px;
                    }
                    .clear_filter{
                        cursor: pointer;
                    }
                    .searchBtn{
                        height: 26px;
                        padding: 0 15px;
                        position: absolute;
                        right: -60px;
                        width: 58px;
                        top: 4px;
                    }
                }
            }
            .block_right{
                float: left;
                width: 26%;
                height: 303px;
                padding: 20px 0;
                border-top: 2px solid $__color-primary;
                color: $__color-label;
                .block_title{
                    height: 88px;
                    padding: 0 20px;
                    display: table;
                    img{
                        width: 88px;
                        height: 88px;
                        display: table-cell;
                        float: left;
                    }
                    span{
                        padding-left: 11px;
                        font-size: 14px;
                        line-height: 20px;
                        display: table-cell;
                        vertical-align: middle;
                        width: calc(100% - 88px);
                    }
                }
                .block_content{
                    padding-left: 20px;
                    margin-top: 20px;
                    .title{
                        font-size: 16px;
                        color: $__color-label;
                        font-weight: 600;
                        line-height: 34px;
                    }
                    .contact{
                        margin-bottom: 15px;
                        .el-input{
                            float: left;
                            width: 200px;
                            margin-right: 10px;
                            margin-bottom: 10px;
                        }
                        .el-button{
                            float: left;
                        }
                    }
                    .phoneNumber{
                        font-size: 14px;
                        color: $__color-show;
                        line-height: 30px;
                        span{
                            color: $__color-label;
                        }
                    }
                }
            }
        }
        .reserva-dialog{
            .hpx-success{
                font-size: 30px !important;
                margin-bottom: 12px !important;
            }
        }
        .table_title{
            height: 48px;
            border-bottom: 1px solid $__color-primary;
            .title_word{
                display: inline-block;
                height: 18px;
                line-height: 18px;
                margin-top: 11px;
                border-left: 2px solid $__color-primary;
                padding-left: 6px;
                margin-right: 40px;
                color: $__color-label;
                font-size: 18px;
            }
        }
    }
    
    .bill_source{
        width: 38px;
        img{
            width: 20px;
            height: 20px;
            vertical-align: middle;
        }
    }
    // .company{
    //     text-align: center;
    // }
    .el-radio-button__orig-radio:checked .el-radio-button__inner{
        background-color: $__color-primary !important;
    }
    .el-button--primary{
        // background-color: $__color-primary !important;
    }
    .full-width{
        width: 100% !important;
    }
    @media screen and (max-width: 1600px){
        .content{
            width: 1400px;
        }
    }
    @media screen and (max-width: 1400px){
        .content{
            width: 1340px;
        }
    }
    @media screen and (max-width: 1350px){
        .content{
            width: 1300px;
        }
    }
    @media screen and (max-width: 1300px){
        .content{
            width: 1270px;
        }
    }
    @media screen and (max-width: 1200px){
        .content{
            width: 1200px;
        }
    }
</style>

<style lang="scss">
    .condition_tangs{
        .el-form-item__label{
            font-size: 16px;
            color: $__color-label;
            font-weight: 600;
        }
    }
    .pccData.el-table{
        .accept{
            .cell{
                text-align: left;
            }
        }
        .is-leaf.accept{
            .cell{
                padding-left: 36px;
            }
        }
        .el-form.el-form--label-left{
            padding: 10px 125px;
            .el-form-item{
                margin-bottom: 0;
                .remark{
                    color: $__color-border;
                }
            }
        }
    }
</style>
